<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>CSS实现垂直手风琴效果</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div class="area"></div>
	<div class="listbox">
		<!-- 锚点 -->
		<div class="list" id="one">
			<a href="#one">Brank</a>
			<span></span>
			<p>If a reader is lost, it is generally because the writer has not been careful enough to keep him on the path.
				This carelessness can take any number of forms. Perhaps a sentence is so excessively cluttered that the reader,
				hacking his way through the verbiage, simply doesn't know what it means. Perhaps a sentence has been so shoddily
				constructed that the reader could read it in any of several ways. Perhaps the writer has switched tenses, or has
				switched pronouns in mid-sentence, so the reader loses track of when the action took place or who is talking.
				Perhaps sentence B is not logical sequel to sentence A —— the writer, in whose head the connection is clear, has
				not bothered to provide the missing link. Perhaps the writer has used an important word incorrectly by not
				taking
				the trouble to look it up. He may think that "sanguine" and "sanguinary" mean the same thing, but the difference
				is a bloody big one. The reader can only infer what the writer is trying to imply.
			</p>
		</div>
		<div class="list" id="two">
			<a href="#two">Arffg</a>
			<span></span>
			<p>If a reader is lost, it is generally because the writer has not been careful enough to keep him on the path.
				This carelessness can take any number of forms. Perhaps a sentence is so excessively cluttered that the reader,
				hacking his way through the verbiage, simply doesn't know what it means. Perhaps a sentence has been so shoddily
				constructed that the reader could read it in any of several ways. Perhaps the writer has switched tenses, or has
				switched pronouns in mid-sentence, so the reader loses track of when the action took place or who is talking.
				Perhaps sentence B is not logical sequel to sentence A —— the writer, in whose head the connection is clear, has
				not bothered to provide the missing link. Perhaps the writer has used an important word incorrectly by not
				taking
				the trouble to look it up. He may think that "sanguine" and "sanguinary" mean the same thing, but the difference
				is a bloody big one. The reader can only infer what the writer is trying to imply.
			</p>
		</div>
		<div class="list" id="treen">
			<a href="#treen">Cfgff</a>
			<span></span>
			<p>If a reader is lost, it is generally because the writer has not been careful enough to keep him on the path.
				This carelessness can take any number of forms. Perhaps a sentence is so excessively cluttered that the reader,
				hacking his way through the verbiage, simply doesn't know what it means. Perhaps a sentence has been so shoddily
				constructed that the reader could read it in any of several ways. Perhaps the writer has switched tenses, or has
				switched pronouns in mid-sentence, so the reader loses track of when the action took place or who is talking.
				Perhaps sentence B is not logical sequel to sentence A —— the writer, in whose head the connection is clear, has
				not bothered to provide the missing link. Perhaps the writer has used an important word incorrectly by not
				taking
				the trouble to look it up. He may think that "sanguine" and "sanguinary" mean the same thing, but the difference
				is a bloody big one. The reader can only infer what the writer is trying to imply.
			</p>
		</div>
	</div>
</body>

</html>